<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>Join Us</title>
        <link href="favicon.ico" rel="shortcut icon">
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="./js/common/vue.js"></script>
        <script src="./js/common/vue-resource.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/join.css">
       
    </head>
    <body>
        <div id="contn">
           <v-header></v-header>
           <v-main :parent-nav="nav" :parent-currentind="currentind" :parent-apply="apply" :parent-joinus="joinus" :parent-webinf="webBasicInf"></v-main>
           <v-footer></v-footer>
        </div>
        <template id="vMain">
            <main>
                <div class="heading">
                    <div class="storeBox" v-if="parentNav.length" v-html="parentNav[parentCurrentind].htmlContent"></div>
                    <p class="pic fill"><img v-if="parentNav.length" :src="parentNav[parentCurrentind].imagePath" class="obj-c" alt=""></p>
                    <div class="fluid flex flex-align-items fill">
                        <div class="txt ready">
                             <p class="delay-1" v-if="parentNav.length">{{parentNav[parentCurrentind].enName}}</p>
                             <p class="delay-2"></p>
                        </div>
                    </div>
                </div>
                <div class="tips">
                    <p></p>
                </div>
                <div class="avatars fillBf">
                    <p class="fluid">
                        <img :src="parentJoinus.imgPath" alt="">    
                    </p>
                </div>
                <div class="recruit fluid">
                    <p>{{parentJoinus.ext01}}</p>
                    <div class="applyList">
                        <div class="content" v-for="(item,i) in parentApply">
                            <div class="storeBox" v-html="item.htmlContent"></div>
                            <p class="flip cursor" @click='showDtls(i)'><span class="fill"></span></p>
                            <p class="ttl">{{item.title}}</p>
                            <div class="des">
                                
                            </div>
                            <p class="apply fillAft cursor" @click="showForm">Apply Now</p>
                            <div class="command">
                                <div class="inner">
                                    <div class="box" v-if="parentApply.length" v-for="(sonItem,n) in item.description.split(',')">
                                        <p>{{sonItem}}:</p>
                                        <ul class="dtl"></ul>
                                    </div>
                                </div>
                            </div>
                        </div>  
                    </div>
                    
                </div>
                <p :class='["shadow","fill",show?"active":""]' @click="showForm"></p>
                <div :class='["infTable","hvc",show?"active":""]' id="oDiv" style="width: 700px;background: #fff;">
                    <p class="close cursor" @click="showForm"></p>
                    <div class="tp flex">
                        <p class="logo"><img :src="parentWebinf.logoImg" alt=""></p>
                        <p class="ttl">Job Application Form</p>
                    </div>
                    <div class="formTp">
                        <p>Position Applied: <input type="text" name="position"></p>
                        <div class="date">
                            Date:
                            <input type="text" name="date">
                        </div>
                    </div>
                    <div class="form">
                        <div class="table">
                            <div class="box flex" id="basic">
                                <div class="blockName flex flex-align-items">
                                    <p>Basic Information</p>
                                </div>
                                <ul class="filling">
                                    <li>
                                        <p>Name</p>
                                        <p><input type="text" name="staffName"></p>
                                    </li>
                                    <li>
                                        <p>Gender</p>
                                        <p><input type="text" id="staffGender"></p>
                                    </li>
                                    <li>
                                        <p>Birth Date</p>
                                        <p><input type="text" id="staffBirth"></p>
                                    </li>
                                    <li>
                                        <p>Marital Status</p>
                                        <p><input type="text" id="staffMarrage"></p>
                                    </li>
                                    <li>
                                        <p>Language Skills</p>
                                        <p><input type="text" id="staffEnglishLevel"></p>
                                    </li>
                                    <li>
                                        <p>Computer Skills</p>
                                        <p><input type="text" id="staffComputerTech"></p>
                                    </li>
                                    <li>
                                        <p>Professional Title</p>
                                        <p><input type="text" id="staffJobName"></p>
                                    </li>
                                    <li>
                                        <p>Mobile Number</p>
                                        <p><input type="text" id="staffPhone"></p>
                                    </li>
                                </ul>
                            </div>
                            <div class="box flex" id="edu">
                                <div class="blockName flex flex-align-items">
                                    <p>Education</p>
                                </div>
                                <ul class="filling">
                                    <li>
                                        <p>Beginning &Ending</p>
                                        <p>School & Major</p>
                                        <p>Degree</p>
                                    </li>
                                    <li>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                    </li>
                                    <li>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                    </li>
                                    <li>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                    </li>
                                </ul>
                            </div>
                            <div class="box flex" id="exp">
                                <div class="blockName flex flex-align-items">
                                    <p>Working Experience</p>
                                </div>
                                <ul class="filling">
                                    <li>
                                        <p>Beginning &Ending</p>
                                        <p>Company Name</p>
                                        <p>Position</p>
                                    </li>
                                    <li>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                    </li>
                                    <li>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                    </li>
                                    <li>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                    </li>
                                    <li>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                    </li>
                                    <li>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                        <p><input type="text"></p>
                                    </li>
                                </ul>
                            </div>
                            <div class="box flex">
                                <div class="blockName flex flex-align-items">
                                    <p>Personal Evaluation</p>
                                </div>
                                <div class="filling">
                                    <textarea id="msg"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btnBox">
                        <p class="submit fillAft" @click="submit">submit</p>
                    </div>
                    <p class="subTip hvc">Submitted successfully!</p>
                </div>
           </main>
        </template>

        <script src="js/common/swiper.js"></script>
        <script src="js/common/jquery.js"></script>
        <script src="./js/common/dataUrl.js"></script>
        <script src="js/common/header.js"></script>
        <script src="js/common/footer.js"></script>
        <script>
            var successSub = null;
            var contn = new Vue({
                el:'#contn',
                data:{
                    currentind:'',
                    nav:[],
                    apply:[],
                    joinus:{},
                    webBasicInf:{}
                },
                methods:{
                    writingWeb:function(){
                        //获取网站基本信息
                        axios.get(dataUrl + 'api/getWebsite',{
                            headers:{
                            Authorization: headers
                            }
                        })
                        .then((res) => {
                            //console.log(res.data.data);
                            this.webBasicInf = res.data.data;
                        })

                        //获取heading
                        axios.get(dataUrl + 'api/getNavbar',{
                            headers:{
                                Authorization: headers
                            }
                        })
                        .then((res) => {
                            //console.log(res.data.data);
                            this.nav = res.data.data;
                            for(var a = 0;a < res.data.data.length;a++){
                                if(window.location.href.indexOf('html') < 0){
                                    this.currentind = 0;
                                }else if(window.location.href.indexOf(res.data.data[a].visitUrl) >= 0){
                                    this.currentind = a;
                                }
                            }
                            setTimeout(function(){
                                $('main .heading .fluid .txt p:eq(1)').text($('main .heading .storeBox p:eq(0)').text());
                                $('main .tips p').text($('main .heading .storeBox p:eq(1)').text());
                            },10)
                        });

                        //获取部分图片
                        axios.post(dataUrl + 'api/getBanner',{identification:'OTHER_PICS'},{
                            headers:{
                                Authorization: headers
                            }
                        })
                        .then((res) => {
                            //console.log(res.data.data);
                            for(var n = 0;n < res.data.data.length;n++){
                                if(res.data.data[n].remark == 'join us'){
                                    this.joinus = res.data.data[0];
                                }
                            }
                        });

                        //获取招聘列表
                        axios.post(dataUrl + 'api/getArchivesDetails',{ext06:0,id:76,size:10000,page:1},{
                            headers:{
                                Authorization: headers
                            }
                        })
                        .then((res) => {
                            //console.log(res.data.data);
                            this.apply = res.data.data.list;
                            var This = this;
                            setTimeout(function(){
                                for(var a = 0;a < This.apply.length;a++){
                                    for(var u = 0;u < $('main .recruit .content:eq(' + a + ') .storeBox').find('ul').length;u++){
                                        var html = $('main .recruit .content:eq(' + a + ') .storeBox').find('ul')[u].innerHTML;
                                        $('main .recruit .content:eq(' + a + ') .inner ul').eq(u).html(html);
                                    }
                                    $('main .recruit .content:eq(' + a + ') .storeBox ul').remove();
                                    for(var p = 0;p < $('main .recruit .content:eq(' + a + ') .storeBox').find('p').length;p++){
                                        var html = $('main .recruit .content:eq(' + a + ') .storeBox').find('p')[p].innerHTML;
                                        if(html.indexOf('<br>') >= 0){
                                            $('main .recruit .content:eq(' + a + ') .storeBox p:eq(' + p + ')').remove();
                                        }
                                    }
                                    $('main .recruit .content:eq(' + a + ') .des').html($('main .recruit .content:eq(' + a + ') .storeBox').html());
                                }
                            },10);
                        })
                    }
                },
                created:function(){
                    this.writingWeb();
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    vMain:{
                        template: '#vMain',
                        data:function(){
                              return{
                                  show:false,
                                  prevent:false,
                                  info:{
                                        basic:[],
                                        edu:[],
                                        exp:[],
                                        personal:''
                                  }
                              }  
                        },
                        methods:{
                            showDtls:function(ind){
                                var This = $('main .recruit .content:eq(' + ind + ') .flip');
                                if(This[0].className.indexOf('clicked') < 0){
                                    This.addClass('clicked');
                                    var innerH = $('main .recruit .content:eq(' + ind + ') .command .inner')[0].offsetHeight;
                                    $('main .recruit .content:eq(' + ind + ') .command').height(innerH);
                                    $('main .recruit .content:eq(' + ind + ') .command').addClass('show');
                                    setTimeout(function(){
                                        $('main .recruit .content:eq(' + ind + ') .command').addClass('complete');
                                    },610)
                                }else{
                                    This.removeClass('clicked');
                                    $('main .recruit .content:eq(' + ind + ') .command').removeClass('complete');
                                    setTimeout(function(){
                                        $('main .recruit .content:eq(' + ind + ') .command').removeClass('show');
                                        $('main .recruit .content:eq(' + ind + ') .command').css('height','');
                                    },10)
                                }
                                this.current = ind;
                            },
                            showForm:function(){
                                this.show = !this.show;
                            },submit:function(){
                                var This = this;
                                if(This.prevent) return false;
                                for(var b = 0;b < $('#basic .filling li').length;b++){
                                    var obj = {};
                                    obj.title = $('#basic .filling li').eq(b).find('p').eq(0).text();
                                    obj.val = $('#basic .filling li').eq(b).find('input').eq(0).val();
                                    this.info.basic.push(obj);
                                }

                                for(var e = 1;e < $('#edu .filling li').length;e++){
                                    var ary = [];
                                    for(var p = 0;p < $('#edu .filling li').eq(e).find('input').length;p++){
                                        ary.push($('#edu .filling li').eq(e).find('input').eq(p).val());
                                    }
                                    this.info.edu.push(ary);
                                }

                                for(var w = 1;w < $('#exp .filling li').length;w++){
                                    var ary = [];
                                    for(var p = 0;p < $('#exp .filling li').eq(w).find('input').length;p++){
                                        ary.push($('#exp .filling li').eq(w).find('input').eq(p).val());
                                    }
                                    this.info.exp.push(ary);
                                }
                                this.info.personal = $('main .infTable .table #msg').val();

                                console.log(this.info);
                                
                                This.prevent = true;
                                console.log('c');
                                $('main .infTable .subTip').addClass('active');
                                successSub = setTimeout(function(){
                                    This.prevent = false;
                                },2500);
                                setTimeout(function(){
                                    $('main .infTable .subTip').removeClass('active');
                                },2510)
                            }
                        },
                        props:['parentNav','parentCurrentind','parentApply','parentJoinus','parentWebinf'],
                    },
                },
            })
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
        <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    </body>
</html>